<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>订房记录</title>
    <link rel="stylesheet" href="../css/mycss.css"/>
    <script src="../public/layui/layui.js"></script>
    <link rel="stylesheet" href="../public/layui/css/layui.css"/>
</head>
<body>
    <div>
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>

    <!--按键工具-->
    <div style="display: none;" id="btnToolBar">
        <div class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm layui-icon layui-icon-edit" lay-event="update">
            提前结账
        </div>
    </div>
    <script>
        layui.use(['form', 'table', 'jquery'], function () {
            let table = layui.table;
            let $ = layui.jquery;

            table.render({
                elem: '#dataTable',
                height: 600,
                url: '../handle/user/account',
                page: true,
                toolbar: '#btnAddAndDel',
                cols: [[
                    {field: 'realName', title: '用户姓名', sort: true, align: 'center'},
                    {field: 'sex', title: '性别', sort: true, align: 'center'},
                    {field: 'identificationNum', title: '身份证号', align: 'center'},
                    {field: 'telephone', title: '电话号', align: 'center'},
                    {field: 'email', title: '邮箱', align: 'center'},
                    {field: 'startTime', title: '订房时间', align: 'center'},
                    {field: 'endTime', title: '退房时间', align: 'center'},
                    {field: 'toolbar', title: '操作', align: 'center', toolbar: '#btnToolBar'}
                ]]
            });

            // 添加按键事件,因为真正的按键被隐藏起来了,所以不能直接用用js的方法去写监听事件,要用数据表格里面提供的方法
            table.on('tool(dataTable)', function (obj) {
                console.log('obj', obj);
                switch (obj.event) {
                    case 'update':
                        account(obj.data);
                        break;
                }
            });

            function account(data) {
                $.ajax({
                    url: '../account/handle/' + data.mid,
                    success(res) {
                        if (res.code === 200) {
                            alert('结账成功');
                        } else {
                            alert('结账失败');
                        }
                    }
                })
            }
        });
    </script>
</body>
</html>